<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../statics/css/iview.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script type="text/javascript" src="../statics/lib/vue.min.js"></script>
    <script type="text/javascript" src="../statics/lib/jquery.min.js"></script>
    <!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
    <script type="text/javascript" src="../statics/lib/iview.min.js"></script>
    <style>
        body ul{
            float: right;
            margin-top: 15px;
        }
        .iForm input,select{
            width: 80%;
        }
        .demo-upload-list img{
            width: 100%;
            height: 100%;
        }
        .ivu-form-item {
            margin-bottom: 10px;
            vertical-align: top;
            zoom: 1
        }
        .ivu-input-icon {
            width: 50%;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            text-align: center;
            color: #80848f;
            position: absolute;
            right: 0;
            z-index: 3;
        }
    </style>
</head>
<body>

<div id="account">
    <div>
        <i-button type="info" @click="openModel">新增</i-button>
        <i-button type="info" @click="updateAccount">修改</i-button>
        <i-button type="info" @click="deleteRoles">删除</i-button>
        <i-table border ref="selection" :columns="accountColumn" :data="accounts" @on-select="onSelect" @on-select-cancel="onSelectCancel"></i-table>
    </div>
    <template>
        <Page :total="totalElements" :page-size="pageSize" show-elevator @on-change="changePage"></Page>
    </template>
    <Modal v-model="showList" style="width: 80%;" :styles="{top: '20px'}" :closable="false">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>新增用户</span>
            </p>
            <i-form :model="formItem" :label-width="120" class="iForm">
                <form-item label="账号">
                    <i-input v-model="formItem.account"  clearable  placeholder="账号"></i-input>
                </form-item>
                <form-item label="密码">
                    <i-input v-model="formItem.password"   placeholder="密码"></i-input>
                </form-item>
                <form-item label="角色">
                    <i-select v-model="formItem.roleIds" multiple style="width:260px">
                        <i-option v-for="(item,key) in roles" :value="item.id" :id="item.id" :key="item.id">{{ item.name }}</i-option>
                    </i-select>
                </form-item>
                <form-item label="性别">
                    <Radio-Group v-model="formItem.sex">
                        <Radio label="male">男</Radio>
                        <Radio label="woman">女</Radio>
                    </Radio-Group>
                </form-item>
                <form-item label="头像" style="height: 60px;">
                    <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="2048"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            type="drag"
                            action="/media/image"
                            style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <div class="demo-upload-list" >
                                <img :src="imageUrl">
                            </div>
                        </div>
                    </Upload>
                </form-item>
                <form-item label="邮箱">
                    <i-input v-model="formItem.email" clearable  placeholder="邮箱" ></i-input>
                </form-item>
                <form-item label="座右铭">
                    <i-input v-model="formItem.motto" clearable  placeholder="座右铭" ></i-input>
                </form-item>
                <form-item label="状态">
                    <Radio-Group v-model="formItem.status">
                        <Radio label="normal">启用</Radio>
                        <Radio label="disable">停用</Radio>
                    </Radio-Group>
                </form-item>
                <form-item label="文字描述">
                    <i-input v-model="formItem.backgroundText" clearable  type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="描述" ></i-input>
                </form-item>
            </i-form>
        <div slot="footer" style="text-align: center">
            <i-Button type="error" size="large"   @click="back">Back</i-Button>
            <i-Button type="success" size="large"   @click="saveOrUpdate">Save</i-Button>
        </div>
    </Modal>




</div>


<script src="../statics/js/account.js"> </script>

</body>
</html>